import React, { useRef, useState } from 'react';
import { Table, Select, Statistic, Card, Col, Row, message, Modal, Input, InputNumber, } from 'antd';
import { ArrowDownOutlined, ArrowUpOutlined, EditFilled } from '@ant-design/icons';
import { useRequest } from 'ahooks';
import { doFetch, getFetch } from '@/utils/doFetch';
import AutoTable from '@/components/AutoTable';

const { Option } = Select;


// 列配置
const columns = [
  {
    title: '使用日期',
    dataIndex: 'createTime',
    key: 'createTime',
    search: false,
  },
  {
    title: '积木变化',
    dataIndex: 'block',
    key: 'block',
    render: (pointsChange, record) => (
      <span style={{ color: record.type === 1 ? 'red' : 'green' }}>
        {record.type === 1 ? `${pointsChange}` : `+${pointsChange}`}
      </span>
    ),
    search: false,
  },
  {
    title: '类型',
    dataIndex: 'type',
    key: 'type',
    filters: [
      { text: '充值', value: 1 },
      { text: '消耗', value: 2 },
    ],
    onFilter: (value, record) => record.type !== value,
    search: false,
    render: (value, record) => {
      return <span>{record.type !== 1 ? '充值' : '消耗'}</span>
    }
  },
  {
    title: '使用人',
    dataIndex: 'name',
    key: 'name',
    search: false,
  },
  {
    title: '备注',
    dataIndex: 'remarks',
    key: 'remarks',
    search: false,
  },
];

const PointsChangeTable = ({ item }) => {
  const { data, refresh } = useRequest(async () => {
    let res = await getFetch({ url: "/org/getDetail/" + item?.id })
    return res?.data?.data ?? {};
  }, {})
  // /org/edit/1824350893533958144/1000

  const [jim, setJim] = useState();
  const { run, loading, runAsync } = useRequest(doFetch, {
    manual: true,
  })

  const [modal, setModal] = useState({
    open: false,
    maskClosable: false,
    onCancel: () => {
      setModal(s => ({
        ...s,
        open: false
      }))
    }
  });

  const actionRef = useRef();

  return (
    <div>
      <Modal
        {...modal}
        loading={loading}
        width={360}
        onOk={async () => {
          if (!jim) {
            message.error('请先输入积木数量');
            return;
          }
          // 确认修改
          let res = await runAsync({ url: `/org/edit/${item.id}/${jim}`, params: {}, method: "PUT" })
          if (res.code === 0) {
            setJim(null)
          }
          message.success('修改成功');
          setModal(s => ({
            ...s,
            open: false
          }))
          refresh();
          actionRef.current?.reload?.();
        }}
      >
        <InputNumber style={{ width: "100%" }} min={0} precision={0} value={jim} onChange={setJim} placeholder='请输入积木数量' />
      </Modal>

      <div style={{ marginBottom: 16, gap: 16 }} className='spread'>
        <span style={{ fontSize: 16 }} className='ltitle'>积木信息</span>
      </div>
      <Row gutter={16} style={{ marginBottom: 16 }}>
        <Col span={12}>
          <Card >
            <Statistic
              title="当前剩余积木"
              value={data?.block ?? 0}
              precision={0}
              valueStyle={{
                color: '#000',
              }}
              prefix={<EditFilled onClick={() => {
                setJim(data?.block ?? 0)
                setModal(s => ({
                  ...s,
                  open: true,
                  title: '修改积木数量',
                }))
              }} />}
              suffix="个"
            />
          </Card>
        </Col>
        <Col span={12}>
          <Card >
            <Statistic
              title="已消耗积木"
              value={data?.useBlock ?? 0}
              precision={0}
              valueStyle={{
                color: '#cf1322',
              }}
              suffix="个"
            />
          </Card>
        </Col>
      </Row>
      <AutoTable
        actionRef={actionRef}
        path={'/org/getOrgBlockPage'}
        columns={columns}
        extraparams={{ orgId: item.id }}
        method='post'
        toolBarRender={false}
        search={false}
      />
    </div>
  );
};

export default PointsChangeTable;
